<template>
	<view style="align-items: center;margin: 25rpx;">

		<view class="arrow-area" style="">

			<uni-forms ref="form" :rules="{}">

				<uni-forms-item label="姓名" name="">
					<uni-easyinput  v-model="user.username"   placeholder="请输入姓名" />
				</uni-forms-item>

				<uni-forms-item label="密码" name="">
					<uni-easyinput type="password"   v-model="user.password" placeholder="请输入密码" />
				</uni-forms-item>

				<uni-forms-item label="年龄" name="">
					<slider @change="ageChange"  min='0' max="100" show-value />
				</uni-forms-item>

				<uni-forms-item label="性别" name="">
					<radio-group name="" @change="sexChange">
						<label>
							<radio value="1" :checked="'1' === user.sex" />男<text></text>
						</label>
						<label>
							<radio value="2" :checked="'2' === user.sex" />女<text></text>
						</label>
					</radio-group>
				</uni-forms-item>

				<uni-forms-item label="爱好" name="">
					<checkbox-group name="" @change="hobbyChange">
						<label v-for="item,index in user.hobbies" style="margin-left: 20rpx; margin-right: 2px">
							<checkbox :value="item" /><text>{{item}}</text>
						</label>
					</checkbox-group>
				</uni-forms-item>

				<uni-forms-item label="介绍" name="">
					<uni-easyinput type="textarea" placeholder="热爱体育" v-model="user.introduce" />
				</uni-forms-item>

				<uni-forms-item label="日期" name="">
					<picker mode="date" @change="dateChange">
						<view>{{user.datetimesingle}}</view>
					</picker>
				</uni-forms-item>

				<uni-forms-item label="城市" name="">
					<uni-combox label="" :candidates="user.cities" 
					placeholder="请选择城市" v-model="user.city"></uni-combox>
				</uni-forms-item>

				<uni-forms-item label="技能" name="">
					<picker mode="selector" @change="skillChange" :range="user.skills">
						<view>{{user.skill==''?'请选择':user.skills[user.skill]}}</view>
					</picker>
				</uni-forms-item>

				<uni-forms-item label="是否接受推荐" name="" >
					<switch :checked="user.adviceAccept" @change="adviceChange"  />
				</uni-forms-item>

				<uni-forms-item label="" name="">
					<button type="primary" @click="register">注册</button>
				</uni-forms-item>

			</uni-forms>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					username: '',
					age: 0,
					password: '',
					repassword: '',
					sex: 2,
					hobbies: ['足球', '篮球', '排球', '网球', '羽毛球', '乒乓球'],
					hobby: [],
					introduce: '',
					datetimesingle: '2023-09-09',
					city: '',
					cities: ['北京', '上海', '长沙', '深圳', '广州'],
					skills: ['编程', '足球', '开车', '开飞机'],
					skill: '',
					adviceAccept: true
				}
			}
		},
		methods: {
			sexChange(e) {
				this.user.sex = e.detail.value
			},
			adviceChange(e) {
				this.user.adviceAccept = e.detail.value
			},
			hobbyChange(e) {
				this.user.hobby = e.detail.value
			},
			ageChange(e) {
				this.user.age = e.detail.value
			},
			dateChange(e) {
				this.user.datetimesingle = e.detail.value
			},
			skillChange(e) {
				this.user.skill = e.detail.value
			},
			register(e) {
				uni.showToast({
					title: '' + this.user.username + '\r' + this.user.age + '\t' +
						this.user.city + '\t' + this.user.datetimesingle + '\t' +
						this.user.introduce + '\t' +
						this.user.hobby + '\t' + this.user.skill + '\t' +
						this.user.adviceAccept,

					icon: 'none'
				});
			}

		}
	}
</script>

<style>

</style>